<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>转盘抽奖</title>
  <link rel="stylesheet" type="text/css" href="../css/game.css"/>
 </head>
 <body>
 <div class="turnplate_box">
  <canvas id="myCanvas" width="300px" height="300px"></canvas>
  <canvas id="myCanvas01" width="200px" height="200px"></canvas>
  <canvas id="myCanvas03" width="200px" height="200px"></canvas>
  <canvas id="myCanvas02" width="150px" height="150px"></canvas>
  <button id="tupBtn" class="turnplatw_btn" onclick="myClick()"></button>
 </div>
 <input id="information" type="text"/>

 <!-- 开始抽奖按钮以及查看信息-->
 <div class="myBtn">
     请输入用户名：<input type="text" id="username"/><br>
     <input type="button" value="点击抽奖（提交）" onclick="queryUser()"/>
     <input type="button" value="查看我的抽奖记录" onclick="chaKan()"/>
    <!-- 查看中奖信息显示-->
    <div id="msg"></div>
  <!-- 中奖信心来回滚动-->
  <div id="infocrol">
   <marquee id="infocro2" direction="up" width="300px" height="150px"></marquee>
  </div>
 </div>
 <img src="../images/td_icon02.png">

 <script type="text/javascript" src="../js/main.js"></script>
 <script>
  var myinformation = document.getElementById("information");
  var msg = document.getElementById("msg");
  var infocro2 = document.getElementById("infocro2");
  //   打开数据库
  var db = openDatabase("demo","","",1024*1024*10);//数据库名称、数据库版本号、数据库描述、数据库大小

  //   连接数据
  db.transaction(function(tx){
   tx.executeSql("create table if not exists t_information(u_name varchar(20),u_info varchar(20))");//创建表的语句
//   tx.executeSql("drop table t_information");
  })
  //进入页面时就直接加载从websql中按姓名查询到的信息内容
  db.transaction(function(tx){
   tx.executeSql("select * from t_information group by u_name",[],function(trans,rs){
      console.log("正确信息",rs);
//    rs.rows.item(i).u_name  rs.rows.item(i).u_info
      for(var i=0;i<rs.rows.length;i++){
       infocro2.innerHTML += "<p>用户<span>"+rs.rows.item(i).u_name+"</span>刚刚抽中了<span>"+rs.rows.item(i).u_info+"</span></p>"
      }
   },function(trans,err){

   });
  })
/*==================== 点击抽奖时向webSQL中添加数据 =========================*/
  function queryUser(){
      myClick();
      var userinfo = myinformation.value;
      var username = document.getElementById("username").value;
      var  userinfolist = new Array();
      var usernamelist = new Array();

        db.transaction(function(tx){
     //四个参数：SQL语句、数据、信息对象、错误信息的回调函数
     tx.executeSql("insert into t_information(u_name,u_info) values(?,?)",[username,userinfo],function(trans,rs){
      console.log("正确信息",rs);
     },function(trans,err){
      console.log("错误信息",err);

     })
    })
      //这里运用了本地存储，可是怎么存储不同用户抽取的奖嘞？？用for??
      userinfolist.push(userinfo);
      usernamelist.push(username);
      console.log("奖品数组:" +userinfolist);
      localStorage.setItem("info",userinfolist);
      localStorage.setItem("name",usernamelist);
      console.log("本地存储用户名："+localStorage.getItem("name"));


  }

  function chaKan(){
   var username = document.getElementById("username").value;
   db.transaction(function(tx){
    tx.executeSql("select * from t_information where u_name = ?",[username],function(trans,rs){
     console.log(rs);
     msg.innerHTML = " " ;
     for(var i=0;i<rs.rows.length;i++){
      console.log( rs.rows.item(i).u_name);
      msg.innerHTML += "用户名："+rs.rows.item(i).u_name +"中奖记录："+rs.rows.item(i).u_info +"<br>";
     }
    },function(trans,err){

    });
   })
  }
 </script>
 </body>
</html>
